@import '../../style/themes/index.less';

@form-prefix-cls: ~'@{prefix}-form';
@item-prefix-cls: ~'@{prefix}-item';
@list-prefix-cls: ~'@{prefix}-list';
@padding-cross: 40px;
@padding-vcross: 20px;

.@{form-prefix-cls} {
  &-item-label {
    display: block;
    font-size: 32px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .@{item-prefix-cls} {
    padding: @padding-vcross @padding-cross;
    color: rgba(0, 0, 0, 0.9);

    &:before {
      left: @padding-cross;
      right: @padding-cross;
    }
  }

  & &-item-error {
    .weui-form-item-label {
      color: @error-color;
    }
    .@{item-prefix-cls}-bd > *,
    .@{item-prefix-cls}-bd > select {
      color: @error-color;
    }
  }

  &-item&-item-pos-top {
    .weui-item-inner {
      flex-wrap: wrap;
    }
    .weui-item-hd {
      width: 100%;
      padding-bottom: 15px;
      margin-bottom: 15px;
      position: relative;

      &:after {
        content: ' ';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 2px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.1);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        z-index: 2;
      }
    }
  }

  .@{list-prefix-cls} {
    &:before {
      display: none;
    }

    &:before,
    &:after {
      left: @padding-cross;
      right: @padding-cross;
    }
  }

  .@{item-prefix-cls}-bd > .weui-checkbox {
    display: flex;
    align-items: center;
    margin: -@padding-cross;
    padding: @padding-cross;

    .weui-checkbox-box {
      top: 0;
    }

    .weui-checkbox-label {
      flex: 1;
    }
  }

  .@{item-prefix-cls}-bd {
    font-size: 32px;
  }

  .weui-picker-item .@{item-prefix-cls}-bd {
    font-size: 34px;
  }

  .virtual-select .@{item-prefix-cls}-hd select,
  .@{item-prefix-cls}-bd > select {
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
    font-size: 32px;
    height: 56px;
    line-height: 56px;
    position: relative;
    z-index: 1;
    color: rgba(0, 0, 0, 0.9);
  }

  .virtual-select {
    .@{item-prefix-cls}-hd {
      position: relative;
    }
    .@{form-prefix-cls}-item-label {
      &:before {
        content: ' ';
        width: 24px;
        height: 48px;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        background-color: currentColor;
        color: rgba(0, 0, 0, 0.3);
        -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
        mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -24px;
      }
      &:after {
        content: ' ';
        position: absolute;
        right: 0;
        top: 0;
        width: 2px;
        bottom: 0;
        border-right: 2px solid rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        margin: -@padding-vcross 0;
      }
    }
  }
}
